<template>
  <div class="boxList">
    <template v-if="typeof item?.employerId === 'number'">
      <template v-if="item.employerId">
        <div class="label success">已录用</div>
      </template>
      <template v-else>
        <div class="label">未录用</div>
      </template>
    </template>
    <h1>地点：{{ item.location }}</h1>
    <div>简介：{{ item.nurseDescribe }}</div>
    <div>薪水：{{ item.expectedSalary || "面聊哦~ " }}</div>

    <template v-if="userInfo?.role !== 2 && !props.hiddenButton">
      <a-button
        v-if="isJoin"
        class="boxButton"
        @click="joinOld(item)"
        type="primary"
        status="success"
      >
        招聘护工
      </a-button>
      <a-button
        v-else
        class="boxButton"
        @click="exitOld(item)"
        type="primary"
        status="warning"
      >
        解雇护工
      </a-button>
    </template>
  </div>
</template>

<script setup lang="ts">
import { fireNurse, getHugongExit, getUserInfo } from "@/apis/oldman";
import { defineProps, onMounted, ref } from "vue";
import { Message } from "@arco-design/web-vue";

const userInfo = ref(null);

const props = defineProps({
  item: {
    // 这里直接接收数组，不需要额外处理ref
    type: Array,
    required: true,
  },
  isJoin: {
    type: Boolean,
    required: true,
  },
  myOld: {
    type: Function,
    required: false,
  },
  myNurse: {
    type: Function,
    required: false,
  },
  hiddenButton: {
    type: Boolean,
    required: true,
  },
});

// 加入养老院
const joinOld = (item) => {
  getHugongExit({
    id: item.id,
  })
    .then((res) => {
      Message.success("应聘成功");
      props.myOld();
    })
    .catch((err) => {
      Message.error("应聘失败");
      props.myOld();
    });
};

// 退出养老院
const exitOld = (item) => {
  if (userInfo.value?.role === 2) {
    getHugongExit({
      id: item.id,
    })
      .then((res) => {
        Message.success("退出成功");
        props.myOld();
      })
      .catch((err) => {
        Message.error("退出失败");
        props.myOld();
      });
  } else {
    fireNurse(item.id)
      .then((res) => {
        props.myOld();
      })
      .catch((err) => {
        props.myOld();
      });
  }
};

onMounted(async () => {
  const res = await getUserInfo();
  userInfo.value = res.data.data;
});
</script>

<style scoped>
.boxList {
  position: relative;
}

.boxButton {
  position: absolute;
  bottom: 50px;
  right: 50px;
}

.label {
  position: absolute;
  right: 10px;
  top: 32px;
  transform: rotateZ(30deg);
  font-size: 32px;
  color: #ff3300;
  border: 2px solid #ff3300;
  border-radius: 8px;
  padding: 2px 6px;
}
.success {
  color: #00aa33;
  border: 2px solid #00aa33;
}
</style>
